<template>
  <el-card>
    <el-table
        :data="stations"
        border
        style="width: 100%"
        @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="50"/>
      <el-table-column
          type="index"
          label="序号"
          width="60"
          :index="(index) => (realPage - 1) * realSize + index + 1"
      />
      <el-table-column prop="stationName" label="站点名称" width="200"/>
      <el-table-column prop="stationType" label="站点类型" width="130"/>
      <el-table-column prop="stationProperty" label="站点属性" width="130"/>
      <el-table-column prop="address" label="详细地址"/>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="$emit('view', row)">查看</el-button>
          <el-button size="small" type="primary" @click="$emit('edit', row)">编辑</el-button>
          <el-button
              size="small"
              :type="row.status === '正常' ? 'warning' : 'success'"
              @click="$emit('toggle', row)"
          >
            {{ row.status === '正常' ? '下线' : '上线' }}
          </el-button>
          <el-button size="small" type="danger" @click="$emit('delete', row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 15px">
      <el-pagination
          :current-page="realPage"
          :page-size="realSize"
          :total="realTotal"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="onPageChange"
          @size-change="onSizeChange"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
import {watch, ref} from "vue";

export default {
  name: "StationTable",
  props: {
    stations: {type: Array, default: () => []},
    page: {type: Number, default: 1},
    size: {type: Number, default: 5},
    total: {type: Number, default: 0},
  },
  emits: [
    "view",
    "edit",
    "toggle",
    "delete",
    "fetch",
    "selection-change",
    "update:page",
    "update:size",
  ],
  setup(props, {emit}) {
    const realPage = ref(props.page);
    const realSize = ref(props.size);
    const realTotal = ref(props.total);

    watch(
        () => props.page,
        (newPage) => {
          realPage.value = newPage;
        }
    );
    watch(
        () => props.size,
        (newSize) => {
          realSize.value = newSize;
        }
    );
    watch(
        () => props.total,
        (newTotal) => {
          realTotal.value = newTotal;
        }
    );

    const onSelectionChange = (selection) => {
      emit("selection-change", selection);
    };

    const onPageChange = (newPage) => {
      realPage.value = newPage;
      emit("update:page", newPage);
      emit("fetch"); // 通知父组件拉取数据
    };

    const onSizeChange = (newSize) => {
      realSize.value = newSize;
      emit("update:size", newSize);
      emit("fetch");
    };

    return {
      realPage,
      realSize,
      realTotal,
      onSelectionChange,
      onPageChange,
      onSizeChange,
    };
  },
};
</script>
